import React, { ReactHTML } from 'react';

import { TEXT_TAG, TEXT_VIEW, TEXT_WEIGHT } from 'components/Text/Text.types';
import { classnames } from 'utils';

import classes from './Text.module.scss';

export type TextProps = {
    /** Дополнительный класс */
    className?: string;
    /** Стиль отображения */
    view?: TEXT_VIEW;
    /** Html-тег */
    tag?: TEXT_TAG;
    /** Начертание шрифта */
    weight?: TEXT_WEIGHT;
    /** Контент */
    children: React.ReactNode;
    /** Цвет */
    color?: 'primary' | 'secondary' | 'accent';
    /** Максимальное кол-во строк */
    maxLines?: number;
};

const cnTest = classnames(classes, 'text');

const Text: React.FC<TextProps> = React.memo(
    ({ className, view, tag = TEXT_TAG.p, weight, children, color, maxLines }) => {
        const Tag = tag as keyof ReactHTML;
        return (
            <Tag
                className={cnTest({ color, view }) + ` ${className ?? ''}`}
                style={{
                    WebkitLineClamp: maxLines,
                    fontWeight: weight === TEXT_WEIGHT.medium ? 500 : weight,
                }}
            >
                {children}
            </Tag>
        );
    },
);

export default Text;
